<!doctype html>
<html>
    <head>
        <title>建模手册 - HT for Web</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="user-scalable=yes, width=1024">
        <style type="text/css">
            h1, h2, h3, h4, h5, h6, p, blockquote {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
                font-size: 13px;
                line-height: 18px;
                color: #737373;
                background-color: white;
                margin: 10px 13px 10px 13px;
            }
            table {
                margin: 10px 0 15px 0;
                border-collapse: collapse;
            }
            td,th {
                border: 1px solid #ddd;
                padding: 3px 10px;
            }
            th {
                padding: 5px 10px;
            }
            a {
                color: #0069d6;
            }
            a:hover {
                color: #0050a3;
                text-decoration: none;
            }
            a img {
                border: none;
            }
            p {
                margin-bottom: 9px;
            }
            h1, h2, h3, h4, h5, h6 {
                color: #404040;
                line-height: 36px;
            }
            h1 {
                margin-bottom: 18px;
                font-size: 30px;
            }
            h2 {
                font-size: 24px;
            }
            h3 {
                font-size: 18px;
            }
            h4 {
                font-size: 16px;
            }
            h5 {
                font-size: 14px;
            }
            h6 {
                font-size: 13px;
            }
            hr {
                margin: 0 0 19px;
                border: 0;
                border-bottom: 1px solid #ccc;
            }
            blockquote {
                padding: 13px 13px 21px 15px;
                margin-bottom: 18px;
                font-family:georgia,serif;
                font-style: italic;
            }
            blockquote:before {
                content:"\201C";
                font-size:40px;
                margin-left:-10px;
                font-family:georgia,serif;
                color:#eee;
            }
            blockquote p {
                font-size: 14px;
                font-weight: 300;
                line-height: 18px;
                margin-bottom: 0;
                font-style: italic;
            }
            code, pre {
                font-family: Monaco, Andale Mono, Courier New, monospace;
            }
            code {
                background-color: #fee9cc;
                color: rgba(0, 0, 0, 0.75);
                padding: 1px 3px;
                font-size: 12px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }
            pre {
                display: block;
                padding: 14px;
                margin: 0 0 18px;
                line-height: 16px;
                font-size: 11px;
                border: 1px solid #d9d9d9;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            pre code {
                background-color: #fff;
                color:#737373;
                font-size: 11px;
                padding: 0;
            }
            sup {
                font-size: 0.83em;
                vertical-align: super;
                line-height: 0;
            }
            * {
                -webkit-print-color-adjust: exact;
            }
            @media screen and (min-width: 914px) {
                body {
                    width: 854px;
                    margin:10px auto;
                }
            }
            @media print {
                body,code,pre code,h1,h2,h3,h4,h5,h6 {
                    color: black;
                }
                table, pre {
                    page-break-inside: avoid;
                }
            }
            iframe{
                width: 100%;
                border: 1px solid #34495E;
                margin: 0;
            }
            .logo{
                vertical-align: middle;
            }

        </style>
        <script>
            function init() {
                var logoSrc = '',
                    logos = document.querySelectorAll('.logo'),
                    i = 0;
                for (; i < logos.length; i++) {
                    logos[i].src = logoSrc;
                }

                var iframes = document.querySelectorAll('iframe'),
                    func = function(){};
                for (i=0; i < iframes.length; i++) {
                    var iframe = iframes[i];

                    // a small hack to make it work on android
                    iframe.ontouchstart = func;

                    if (window.location && window.location.hostname && window.location.hostname.indexOf('hightopo') >= 0) {
                        var div = document.createElement('div');
                        div.style.float = 'left';
                        div.innerHTML = '<a href="https://hightopo.com/codeeditor/index.html?url=' + iframe.contentWindow.location.pathname + '" target="_blank">在线编辑</a>';
                        iframe.parentNode.insertBefore(div, iframe);

                        var div = document.createElement('div');
                        div.style.float = 'left';
                        div.innerHTML = '&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;';
                        iframe.parentNode.insertBefore(div, iframe);
                    }

                    var div = document.createElement('div');
                    div.innerHTML = '<a href="' + iframe.src + '" target="_blank">独立运行→</a>';
                    iframe.parentNode.insertBefore(div, iframe);
                }
            }
        </script>
    </head>
    <body onload="init();">
        <a href="http://www.hightopo.com"><img class="logo"></a>HT for Web 建模手册
        <hr style="margin: 1px 0 20px 0">
<p>索引</p>

<ul><li><a href="#概述">概述</a></li><li><a href="#模型基础">模型基础</a></li><li><a href="#模型注册">模型注册</a></li><li><a href="#建模函数">建模函数</a><ul><li><a href="#createboxmodel">createBoxModel</a></li><li><a href="#createspheremodel">createSphereModel</a></li><li><a href="#createsmoothspheremodel">createSmoothSphereModel</a></li><li><a href="#createcylindermodel">createCylinderModel</a></li><li><a href="#createsmoothcylindermodel">createSmoothCylinderModel</a></li><li><a href="#createconemodel">createConeModel</a></li><li><a href="#createsmoothconemodel">createSmoothConeModel</a></li><li><a href="#createtorusmodel">createTorusModel</a></li><li><a href="#createsmoothtorusmodel">createSmoothTorusModel</a></li><li><a href="#createroundrectmodel">createRoundRectModel</a></li><li><a href="#createstarmodel">createStarModel</a></li><li><a href="#createrectmodel">createRectModel</a></li><li><a href="#createtrianglemodel">createTriangleModel</a></li><li><a href="#createrighttrianglemodel">createRightTriangleModel</a></li><li><a href="#createparallelogrammodel">createParallelogramModel</a></li><li><a href="#createtrapezoidmodel">createTrapezoidModel</a></li><li><a href="#createextrusionmodel">createExtrusionModel</a></li><li><a href="#createringmodel">createRingModel</a></li><li><a href="#createsmoothringmodel">createSmoothRingModel</a></li><li><a href="#createframemodel">createFrameModel</a></li></ul></li><li><a href="#模型属性">模型属性</a></li><li><a href="#模型组合">模型组合</a></li><li><a href="#数据绑定">数据绑定</a></li><li><a href="#扩展类型">扩展类型</a><ul><li><a href="#symbol">Symbol</a></li><li><a href="#csgnode">CSGNode</a></li><li><a href="#csgbox">CSGBox</a></li><li><a href="#doorwindow">DoorWindow</a></li><li><a href="#csgshape">CSGShape</a></li></ul></li></ul>

<hr/>

<div id="ref_overview"></div>

<h2>概述</h2>

<p><code>HT for 3D Web</code>提供了<a href="../../core/3d/ht-3d-guide.html#ref_cube">六面体</a>、
<a href="../../core/3d/ht-3d-guide.html#ref_shape3d">shape3d</a>上预定义的球体、圆柱体等多种常规三维模型，
<a href="../../core/shape/ht-shape-guide.html">ht.Shape</a>类型可实现墙面、管道和多边形等三维模型效果，
本手册将介绍更灵活的自定义三维模型功能，以满足不同行业设备及不同环境场景的建模需求。</p>

<p>自定义<code>3D</code>模型具有以下优点：</p>

<ul><li>更大的灵活度，可以自定义出任意形状和样式的<code>3D</code>模型</li><li>可复用性、节省内存，同类型图元共享一份<code>3D</code>模型数据</li><li>实现多模型的组合、无限嵌套组合、合并融合成单一模型</li><li>自定义模型颜色、大小等呈现属性与数据模型的绑定规则</li><li>导入<code>Blender</code>、<code>3ds Max</code>和<code>Maya</code>等第三方建模工具构建的模型，参见<a href="../../plugin/obj/ht-obj-guide.html">OBJ手册</a></li></ul>

<p>本手册介绍的部分扩展模型库的函数，由<code>ht-modeling.js</code>的建模扩展包提供。</p>

<div id="ref_basic"></div>

<h2>模型基础</h2>

<p><code>3D</code>模型是由最基础的三角形面拼接合成，例如<code>1</code>个矩形可以由<code>2</code>个三角形构成，<code>1</code>个立方体由<code>6</code>个面即<code>12</code>个三角形构成，
以此类推更复杂的模型可以由许多的小三角形组合合成。因此<code>3D</code>模型定义即为对构造模型的所有三角形的描述，
而每个三角形由三个顶点<a href="http://en.wikipedia.org/wiki/Vertex_(geometry)">vertex</a>构成，
每个顶点<code>vertex</code>由<code>x,y,z</code>三维空间坐标决定，<code>HT</code>采用右手螺旋定则来确定三个顶点构造三角形面的正面。</p>

<p><img src=""></p>

<p>最简单的<code>3D</code>模型描述方式就是由一个顶点数组来描述，例如<code>p1</code>-<code>p2</code>-<code>p3</code>这三个点构成的三角形，
可用数组<code>[p1.x, p1.y, p1.z, p2.x, p2.y, p2.z, p3.x, p3.y, p3.z]</code>来描述，更多三角形如下图所示：</p>

<p><img src=""></p>

<p>以上这种描述方式格式简单较容易理解，但重复数据较多，例如上图中顶点<code>1</code>、<code>2</code>和<code>3</code>分别在<code>T1</code>、<code>T2</code>和<code>T3</code>的三角形定义中重复描述，
因此可采用顶点和三角形分离描述的方式，即用两个数组，一个数组描述顶点<code>vertices</code>，<code>HT</code>中简称<code>vs</code>，
一个数组描述三角形对应顶点的索引<code>indices</code>，<code>HT</code>中简称<code>is</code>。上图对于的索引描述方式如下：</p>

<p><img src=""></p>

<p>从几何模型角度以上的定义已足够构建一个完整<code>3D</code>模型，界面呈现一般还需要定义颜色或贴图决定渲染效果，
采用贴图的渲染方式需要对每个顶点定义其对应的贴图位置信息，
<a href="http://en.wikipedia.org/wiki/UV_mapping">UV Mapping</a>参见六面体章节，
<code>HT</code>中简称为<code>uv</code>。如果模型只用普通颜色渲染，则可不定义该参数。</p>

<p>三维场景模型显示效果还取决于每个三角形面法线向量与光线的夹角，法线向量<code>normal</code>在<code>HT</code>的模型中以<code>ns</code>的简称代表，
一般<code>HT</code>可根据顶点自动计算<code>ns</code>信息，但有些模型为实现特殊的渲染效果，每个顶点可通过<code>ns</code>指定对应的法线向量值，
可参考<a href="http://en.wikipedia.org/wiki/Phong_shading">Phong shading</a>进行理解。</p>

<p><img src=""></p>

<p>以下定义模型均采用在<code>xzy</code>轴大小为<code>1</code>范围内的立方体作为参考，<code>[0,0,0]</code>对应于图元的中心位置，
如果<code>xzy</code>轴的点坐标绝对值超过<code>0.5</code>则意味着超出图元<code>size3d</code>定义的大小。</p>

<div id="ref_register"></div>

<h2>模型注册</h2>

<p>通过<code>ht.Default.setShape3dModel(name, model)</code>函数，可注册自定义<code>3D</code>模型：</p>

<ul><li><code>name</code>为模型名称，如果名称与预定义的一样，则会替换预定义的模型。</li><li><p><code>model</code>为<code>JSON</code>类型对象，其具体属性参数定义如下，其中的<code>bottom_*</code>、<code>top_*</code>、<code>from_*</code>和<code>to_*</code>分别对应
<code>shape3d.bottom.*</code>、<code>shape3d.top.*</code>、<code>shape3d.from.*</code>和<code>shape3d.to.*</code>的控制参数。例如<code>3D</code>模型可以定义
<code>top_*</code>模型信息，但顶面是否显示由<code>shape3d.top.visible</code>参数控制，顶面显示颜色由<code>shape3d.top.color</code>参数控制，
顶面是否贴图由<code>shape3d.top.image</code>参数控制，如果模型没有定义<code>top_*</code>信息，则<code>shape3d.top.*</code>参数皆无意义。</p><ul><li><code>vs</code>：顶点坐标数组</li><li><code>is</code>：顶点索引数组</li><li><code>uv</code>：顶点贴图坐标数组</li><li><code>ns</code>：顶点法线向量数组</li><li><code>bottom_vs</code>：底面顶点坐标数组</li><li><code>bottom_is</code>：底面顶点索引数组</li><li><code>bottom_uv</code>：底面顶点贴图坐标数组</li><li><code>bottom_ns</code>：底面顶点法线向量数组</li><li><code>top_vs</code>：顶面顶点坐标数组</li><li><code>top_is</code>：顶面顶点索引数组</li><li><code>top_uv</code>：顶面顶点贴图坐标数组</li><li><code>top_ns</code>：顶面顶点法线向量数组</li><li><code>from_vs</code>：起始面顶点坐标数组</li><li><code>from_is</code>：起始面顶点索引数组</li><li><code>from_uv</code>：起始面顶点贴图坐标数组</li><li><code>from_ns</code>：起始面顶点法线向量数组</li><li><code>to_vs</code>：结束面顶点坐标数组</li><li><code>to_is</code>：结束面顶点索引数组</li><li><code>to_uv</code>：结束面顶点贴图坐标数组</li><li><code>to_ns</code>：结束面顶点法线向量数组</li></ul></li></ul>

<p>综上所述，自定义模型的流程为：</p>

<ul><li>先构建<code>3D</code>模型的<code>JSON</code>数据结构信息对象</li><li>将<code>JSON</code>模型对象注册到系统中，<code>ht.Default.setShape3dModel(&#39;dragon&#39;, dragonModel)</code></li><li>设置需要显示为该模型效果的图元属性，<code>node.setStyle(&#39;shape3d&#39;, &#39;dragon&#39;)</code></li></ul>

<p>类似<code>2D</code>图片不需要全局注册，可直接将内容设置的图元属性<code>node.setImage(&#39;www.google.com/logo.png&#39;)</code>的方式，<code>3D</code>也支持这种简化的方式，
将构建<code>3D</code>的<code>JSON</code>模型对象直接设置到图元属性：<code>node.setStyle(&#39;shape3d&#39;, dragonModel)</code>，但这种方式对于<code>DataModel</code>序列化数据导出是不利的，
这种方式导致相同模型的图元重复输出<code>3D</code>模型信息，而且<code>3D</code>模型信息一般数据量很大，不建议与<code>DataModel</code>的整体模型信息一起导出，
我们一般视<code>3D</code>模型信息和图片信息同为外围资源信息，建议与<code>DataModel</code>数据模型信息分开存储管理。</p>

<div id="ref_func"></div>

<h2>建模函数</h2>

<p><iframe src="examples/example_custommodel.html" style="height:400px"></iframe></p>

<p>自定义<code>3D</code>模型非常灵活强大，但对于复杂模型，手写顶点工作量和难度很高，为此<code>HT</code>抽象了几类模型，提供了函数<code>API</code>的便捷构建方式，
以下函数除<code>createFrameModel</code>如要引入<code>ht-modeling.js</code>扩展包外，其余都已由<code>ht.js</code>提供：</p>

<div id="ref_createBoxModel"></div>

<h3>createBoxModel</h3>

<p><code>ht.Default.createBoxModel()</code>构建六面体模型，该模型的六个面显示的颜色和贴图都将一样</p>

<div id="ref_createSphereModel"></div>

<h3>createSphereModel</h3>

<p><code>ht.Default.createSphereModel(side, sideFrom, sideTo, from, to, resolution)</code>构建球体模型</p>

<ul><li><code>side</code>：总边数</li><li><code>sideFrom</code>：起始边索引</li><li><code>sideTo</code>：结束边索引</li><li><code>from</code>：是否有起始面</li><li><code>to</code>：是否有结束面</li><li><code>resolution</code>：代表微分段数</li></ul>

<div id="ref_createSmoothSphereModel"></div>

<h3>createSmoothSphereModel</h3>

<p><code>ht.Default.createSmoothSphereModel(hResolution, vResolution, hStart, hArc, vStart, vArc, radius)</code>构建光滑球体模型</p>

<ul><li><code>hResolution</code>：水平方向微分段数</li><li><code>vResolution</code>：垂直方向微分段数</li><li><code>hStart</code>：水平方向起始角度，默认为<code>0</code></li><li><code>hArc</code>：水平方向总弧度，默认为<code>Math.PI*2</code></li><li><code>vStart</code>：垂直方向起始角度，默认为<code>0</code></li><li><code>vArc</code>：垂直方向总弧度，默认为<code>Math.PI</code></li><li><code>radius</code>：球体半径，默认为<code>0.5</code></li></ul>

<div id="ref_createCylinderModel"></div>

<h3>createCylinderModel</h3>

<p><code>ht.Default.createCylinderModel(side, sideFrom, sideTo, from, to, top, bottom)</code>构建圆柱体模型</p>

<ul><li><code>side</code>：总边数</li><li><code>sideFrom</code>：起始边索引</li><li><code>sideTo</code>：结束边索引</li><li><code>from</code>：是否有起始面</li><li><code>to</code>：是否有结束面</li><li><code>top</code>：是否有顶部</li><li><code>bottom</code>：是否有底部</li></ul>

<div id="ref_createSmoothCylinderModel"></div>

<h3>createSmoothCylinderModel</h3>

<p><code>ht.Default.createSmoothCylinderModel(resolution, top, bottom, topRadius, bottomRadius, start, arc, height)</code>构建光滑圆柱体模型</p>

<ul><li><code>resolution</code>：圆柱微分段数</li><li><code>top</code>：是否有顶部</li><li><code>bottom</code>：是否有底部</li><li><code>topRadius</code>：顶部半径，默认为<code>0.5</code></li><li><code>bottomRadius</code>：底部半径，默认为<code>0.5</code></li><li><code>start</code>：起始角度，默认为<code>0</code></li><li><code>arc</code>：总弧度，默认为<code>Math.PI*2</code></li><li><code>height</code>：圆柱高度，默认为<code>1</code></li></ul>

<div id="ref_createConeModel"></div>

<h3>createConeModel</h3>

<p><code>ht.Default.createConeModel(side, sideFrom, sideTo, from, to, bottom)</code>构建圆锥体模型</p>

<ul><li><code>side</code>：总边数</li><li><code>sideFrom</code>：起始边索引</li><li><code>sideTo</code>：结束边索引</li><li><code>from</code>：是否有起始面</li><li><code>to</code>：是否有结束面</li><li><code>bottom</code>：是否有底部</li></ul>

<div id="ref_createSmoothConeModel"></div>

<h3>createSmoothConeModel</h3>

<p><code>ht.Default.createSmoothConeModel(bottom, resolution, start, arc, radius)</code>构建光滑圆锥体模型</p>

<ul><li><code>bottom</code>：是否有底部</li><li><code>resolution</code>：微分段数</li><li><code>start</code>：起始角度，默认为<code>0</code></li><li><code>arc</code>：总弧度，默认为<code>Math.PI*2</code></li><li><code>radius</code>：底部半径，默认为<code>0.5</code></li></ul>

<div id="ref_createTorusModel"></div>

<h3>createTorusModel</h3>

<p><code>ht.Default.createTorusModel(side, sideFrom, sideTo, from, to, radius, resolution)</code>构建圆环体模型</p>

<ul><li><code>side</code>：总边数</li><li><code>sideFrom</code>：起始边索引</li><li><code>sideTo</code>：结束边索引</li><li><code>from</code>：是否有起始面</li><li><code>to</code>：是否有结束面</li><li><code>radius</code>：圆环的管半径，默认值为<code>0.17</code>，可取值范围<code>0~2.5</code></li><li><code>resolution</code>：截面圆形微分段数</li></ul>

<div id="ref_createSmoothTorusModel"></div>

<h3>createSmoothTorusModel</h3>

<p><code>ht.Default.createSmoothTorusModel(radius, tubeRadius, hResolution, vResolution, start, arc)</code>构建光滑圆环体模型</p>

<ul><li><code>radius</code>：圆环半径位置</li><li><code>tubeRadius</code>：截面圆形半径大小</li><li><code>hResolution</code>：圆环水平方向微分段数</li><li><code>vResolution</code>：截面圆形微分段数</li><li><code>start</code>：起始角度，默认为<code>0</code></li><li><code>arc</code>：总弧度，默认为<code>Math.PI*2</code></li></ul>

<div id="ref_createRoundRectModel"></div>

<h3>createRoundRectModel</h3>

<p><code>ht.Default.createRoundRectModel(top, bottom)</code>构建圆角矩形体模型</p>

<ul><li><code>top</code>：是否有顶部</li><li><code>bottom</code>：是否有底部</li></ul>

<div id="ref_createStarModel"></div>

<h3>createStarModel</h3>

<p><code>ht.Default.createStarModel(top, bottom)</code>构建星形体模型</p>

<ul><li><code>top</code>：是否有顶部</li><li><code>bottom</code>：是否有底部</li></ul>

<div id="ref_createRectModel"></div>

<h3>createRectModel</h3>

<p><code>ht.Default.createRectModel(top, bottom)</code>构建矩形体模型</p>

<ul><li><code>top</code>：是否有顶部</li><li><code>bottom</code>：是否有底部</li></ul>

<div id="ref_createTriangleModel"></div>

<h3>createTriangleModel</h3>

<p><code>ht.Default.createTriangleModel(top, bottom)</code>构建三角形体模型</p>

<ul><li><code>top</code>：是否有顶部</li><li><code>bottom</code>：是否有底部</li></ul>

<div id="ref_createRightTriangleModel"></div>

<h3>createRightTriangleModel</h3>

<p><code>ht.Default.createRightTriangleModel(top, bottom)</code>构建直角三角形体模型</p>

<ul><li><code>top</code>：是否有顶部</li><li><code>bottom</code>：是否有底部</li></ul>

<div id="ref_createParallelogramModel"></div>

<h3>createParallelogramModel</h3>

<p><code>ht.Default.createParallelogramModel(top, bottom)</code>构建平行四边形体模型</p>

<ul><li><code>top</code>：是否有顶部</li><li><code>bottom</code>：是否有底部</li></ul>

<div id="ref_createTrapezoidModel"></div>

<h3>createTrapezoidModel</h3>

<p><code>ht.Default.createTrapezoidModel(top, bottom)</code>构建梯形体模型</p>

<ul><li><code>top</code>：是否有顶部</li><li><code>bottom</code>：是否有底部</li></ul>

<div id="ref_createExtrusionModel"></div>

<h3>createExtrusionModel</h3>

<p><code>ht.Default.createExtrusionModel(array, segments, top, bottom, resolution, repeatUVLength, tall, elevation)</code>根据<code>xz</code>平面多边形，挤压形成<code>3D</code>模型。</p>

<ul><li><code>array</code>：定义<code>xz</code>平面的所有点坐标，格式为：<code>[x1, z1, x2, z2, ...]</code></li><li><code>segments</code>：定义点连接样式，数组元素为整型值，为空则代表所有点连成直线<ul><li>1：<code>moveTo</code>，占用<code>1</code>个点信息</li><li>2：<code>lineTo</code>，占用<code>1</code>个点信息</li><li>3：<code>quadraticCurveTo</code>，占用<code>2</code>个点信息</li><li>4：<code>bezierCurveTo</code>，占用<code>3</code>个点信息</li><li>5：<code>closePath</code>，不占用点信息</li></ul></li><li><code>top</code>：是否有顶部</li><li><code>bottom</code>：是否有底部</li><li><code>resolution</code>：微分段数</li><li><code>repeatUVLength</code>：默认为空，设置值后顶部和底部的贴图将根据制定长度值进行重复</li><li><code>tall</code>：模型高度，默认为<code>0.5</code></li><li><code>elevation</code>：模型中心的<code>y</code>轴位置，默认值为<code>0</code></li></ul>

<div id="ref_createRingModel"></div>

<h3>createRingModel</h3>

<p><code>ht.Default.createRingModel(array, segments, resolution, top, bottom, side, sideFrom, sideTo, from, to)</code>根据<code>xy</code>平面的曲线，环绕一周形成<code>3D</code>模型。</p>

<ul><li><code>array</code>：定义<code>xy</code>平面的所有点坐标，格式为：<code>[x1, y1, x2, y2, ...]</code></li><li><code>segments</code>：定义点连接样式，数组元素为整型值，为空则代表所有点连成直线<ul><li>1：<code>moveTo</code>，占用<code>1</code>个点信息</li><li>2：<code>lineTo</code>，占用<code>1</code>个点信息</li><li>3：<code>quadraticCurveTo</code>，占用<code>2</code>个点信息</li><li>4：<code>bezierCurveTo</code>，占用<code>3</code>个点信息</li><li>5：<code>closePath</code>，不占用点信息</li></ul></li><li><code>resolution</code>：曲线微分段数</li><li><code>top</code>：是否有顶部</li><li><code>bottom</code>：是否有底部</li><li><code>side</code>：总边数</li><li><code>sideFrom</code>：起始边索引</li><li><code>sideTo</code>：结束边索引</li><li><code>from</code>：是否有起始面</li><li><code>to</code>：是否有结束面</li></ul>

<div id="ref_createSmoothRingModel"></div>

<h3>createSmoothRingModel</h3>

<p><code>ht.Default.createSmoothRingModel(array, segments, vResolution, start, arc, hResolution)</code>根据<code>xy</code>平面的曲线，环绕一周形成光滑<code>3D</code>模型。</p>

<ul><li><code>array</code>：定义<code>xy</code>平面的所有点坐标，格式为：<code>[x1, y1, x2, y2, ...]</code></li><li><code>segments</code>：定义点连接样式，数组元素为整型值，为空则代表所有点连成直线<ul><li>1：<code>moveTo</code>，占用<code>1</code>个点信息</li><li>2：<code>lineTo</code>，占用<code>1</code>个点信息</li><li>3：<code>quadraticCurveTo</code>，占用<code>2</code>个点信息</li><li>4：<code>bezierCurveTo</code>，占用<code>3</code>个点信息</li><li>5：<code>closePath</code>，不占用点信息</li></ul></li><li><code>vResolution</code>：曲线微分段数</li><li><code>start</code>：起始角度，默认为<code>0</code></li><li><code>arc</code>：总弧度，默认为<code>Math.PI*2</code></li><li><code>hResolution</code>：水平环绕微分段数</li></ul>

<div id="ref_createFrameModel"></div>

<h3>createFrameModel</h3>

<p><code>ht.Default.createFrameModel(dx, dy, dz, params)</code>构建框架体模型</p>

<ul><li><code>dx</code>：<code>x</code>轴框厚度，默认值为<code>0.07</code></li><li><code>dy</code>：<code>y</code>轴框厚度，默认值为<code>0.07</code></li><li><code>dz</code>：<code>z</code>轴框厚度，默认值为<code>0.07</code></li><li><code>params</code>为<code>JSON</code>结构对象参数，对象属性为：<ul><li><code>top</code>：<code>true</code>代表整体覆盖面，<code>false</code>代表该面为空，其余属性代表镂空，也即默认效果</li><li><code>bottom</code>：<code>true</code>代表整体覆盖面，<code>false</code>代表该面为空，其余属性代表镂空，也即默认效果</li><li><code>left</code>：<code>true</code>代表整体覆盖面，<code>false</code>代表该面为空，其余属性代表镂空，也即默认效果</li><li><code>right</code>：<code>true</code>代表整体覆盖面，<code>false</code>代表该面为空，其余属性代表镂空，也即默认效果</li><li><code>front</code>：<code>true</code>代表整体覆盖面，<code>false</code>代表该面为空，其余属性代表镂空，也即默认效果</li><li><code>back</code>：<code>true</code>代表整体覆盖面，<code>false</code>代表该面为空，其余属性代表镂空，也即默认效果</li></ul></li></ul>

<p><iframe src="examples/example_api.html" style="height:580px"></iframe></p>

<div id="ref_attr"></div>

<h2>模型属性</h2>

<p>除了<a href="#ref_basic">模型基础</a>章节介绍的构建模型顶点相关的基础属性外，模型<code>JSON</code>对象还可定义以下属性：</p>

<ul><li><code>s3</code>：数组类型如<code>[0.5, 2.0, 3.0]</code>，代表模型<code>x</code>轴方向缩小一半，模型<code>y</code>轴方向扩大一倍，模型<code>z</code>轴方向扩大三倍</li><li><code>t3</code>：数组类型如<code>[10, -20, 30]</code>，代表模型<code>x</code>轴方向平移<code>10</code>，模型<code>y</code>轴方向平移<code>-20</code>，模型<code>z</code>轴方向平移<code>30</code></li><li><code>r3</code>：数组类型如<code>[Math.PI/2, 0, 0]</code>，代表模型以<code>x</code>轴方向旋转<code>Math.PI/2</code>弧度，<code>y</code>和<code>z</code>轴方向不变</li><li><code>rotationMode</code>：旋转模型，控制<code>r3</code>的三个轴线旋转先后顺序，默认为<code>xzy</code></li></ul>

<p>以下属性值默认取至<code>style</code>的相应<code>shape3d.*</code>，如果模型上进行设置，则模型上的定义具有更高优先级：</p>

<ul><li><code>color</code>：默认值为<code>#3498DB</code>，<code>3d</code>图形整体颜色</li><li><code>topColor</code>：默认值为<code>undefined</code>，<code>3d</code>图形顶面颜色</li><li><code>bottomColCor</code>：默认值为<code>undefined</code>，<code>3d</code>图形底面颜色</li><li><code>fromColor</code>：默认值为<code>undefined</code>，<code>3d</code>图形起始面颜色</li><li><code>toColor</code>：默认值为<code>undefined</code>，<code>3d</code>图形结束面颜色</li><li><code>image</code>：默认值为<code>undefined</code>，<code>3d</code>图形整体贴图</li><li><code>topImage</code>：默认值为<code>undefined</code>，<code>3d</code>图形顶面贴图</li><li><code>bottomImage</code>：默认值为<code>undefined</code>，<code>3d</code>图形底面贴图</li><li><code>fromImage</code>：默认值为<code>undefined</code>，<code>3d</code>图形起始面贴图</li><li><code>toImage</code>：默认值为<code>undefined</code>，<code>3d</code>图形结束面贴图</li><li><code>light</code>：默认值为<code>true</code>，<code>3d</code>图形是否受光线影响</li><li><code>visible</code>：默认值为<code>true</code>，决定<code>3d</code>图形是否可见，该参数不影响<code>label</code>，<code>note</code>和<code>icons</code>等其他部分元素</li><li><code>fromVisible</code>：默认值为<code>true</code>，决定<code>3d</code>图形起始面是否可见</li><li><code>toVisible</code>：默认值为<code>true</code>，决定<code>3d</code>图形结束面是否可见</li><li><code>topVisible</code>：默认值为<code>true</code>，决定<code>3d</code>图形顶面是否可见</li><li><code>bottomVisible</code>：默认值为<code>true</code>，决定<code>3d</code>图形底面是否可见</li><li><code>opacity</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形的透明度，值范围<code>0~1</code></li><li><code>reverseFlip</code>：默认值为<code>false</code>，决定<code>3d</code>图形的反面是否显示正面的内容</li><li><code>reverseColor</code>：<code>#868686</code>，决定<code>3d</code>图形的反面颜色</li><li><code>reverseCull</code>：默认值为<code>false</code>，决定<code>3d</code>图形的反面是否显示，隐藏背面可提高性能</li><li><code>transparent</code>：默认值为<code>false</code>，决定<code>3d</code>图形是否透明</li><li><code>uvOffset</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形整体贴图的<code>uv</code>偏移，格式为<code>[0.5, 0.5]</code></li><li><code>uvScale</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形整体贴图的<code>uv</code>缩放，格式为<code>[3, 2]</code></li><li><code>topUvOffset</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形顶面贴图的<code>uv</code>偏移，格式为<code>[0.5, 0.5]</code></li><li><code>topUvScale</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形顶面贴图的<code>uv</code>缩放，格式为<code>[3, 2]</code></li><li><code>bottomUvOffset</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形底面贴图的<code>uv</code>偏移，格式为<code>[0.5, 0.5]</code></li><li><code>bottomUvScale</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形底面贴图的<code>uv</code>缩放，格式为<code>[3, 2]</code></li><li><code>fromUvOffset</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形起始面贴图的<code>uv</code>偏移，格式为<code>[0.5, 0.5]</code></li><li><code>fromUvScale</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形起始面贴图的<code>uv</code>缩放，格式为<code>[3, 2]</code></li><li><code>toUvOffset</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形结束面贴图的<code>uv</code>偏移，格式为<code>[0.5, 0.5]</code></li><li><code>toUvScale</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形结束面贴图的<code>uv</code>缩放，格式为<code>[3, 2]</code></li></ul>

<div id="ref_group"></div>

<h2>模型组合</h2>

<p>较为复杂的模型往往需要多个小模型组合而成，采用目前掌握的知识可通过多个<code>Node</code>图元分别设置不同部位模型的<code>shape3d</code>属性实现，
如果需要多个部分粘在一起的效果，可通过将这些<code>Node</code>图元相互通过<code>Node#setHost</code>函数相互环状吸附在一起。
但这样的解决方案会导致对象管理的不方便，例如一把椅子可有由四条腿和一个平面组成，但从对象管理角度或用户使用角度，
更希望整个椅子就是一个<code>Node</code>对象，在<code>TreeView</code>视图上仅为一个节点，这种情况就是使用模型组合功能的最佳场合了。</p>

<p>组合模型的定义非常简单且灵活，以<code>Array</code>数组方式即可组合多个模型</p>

<pre><code>ht.Default.setShape3dModel(&#39;A&#39;, modelA);
ht.Default.setShape3dModel(&#39;B&#39;, modelB);
ht.Default.setShape3dModel(&#39;C&#39;, [&#39;A&#39;, &#39;B&#39;]);</code></pre>

<p>以上代码分别定义了<code>A</code>、<code>B</code>和<code>C</code>三种模型，其中模型<code>C</code>为<code>A</code>和<code>B</code>两种模型的组合。</p>

<pre><code>ht.Default.setShape3dModel(&#39;E&#39;, [&#39;A&#39;, &#39;B&#39;, &#39;sphere&#39;, modelD])</code></pre>

<p>组合模型的数组元素不仅可为新定义的模型名称，还可为预定义的模型名称，以及直接为模型<code>JSON</code>对象，
以上代码定义了新模型<code>E</code>，该模型由自定义的<code>A</code>和<code>B</code>模型，预定义的<code>sphere</code>球体，以及<code>modelD</code>四个模型组合而成。</p>

<pre><code>ht.Default.setShape3dModel(&#39;F&#39;, [
    {
        shape3d: &#39;box&#39;,
        color: &#39;yellow&#39;
    },
    {
        shape3d: &#39;box&#39;,
        s3: [0.5, 0.5, 1.1],
        color: &#39;red&#39;
    }
]);</code></pre>

<p><a href="#ref_attr">模型属性</a>章节的属性不仅可设置在模型的<code>JSON</code>对象上，也可以直接在组合模型数组中的新元素对象上设置，
以上代码定义了新模型<code>F</code>，其由两个<code>box</code>模型组合而成，模型类型由<code>shape3d</code>的元素属性定义，还可设置<code>color</code>和<code>s3</code>等模型参数。</p>

<pre><code>ht.Default.setShape3dModel(&#39;G&#39;, [
    {
        shape3d: [&#39;cylinder&#39;, {shape3d: &#39;cone&#39;, color: &#39;green&#39;, t3: [1, 0, 0]}],
        color: &#39;yellow&#39;,
        t3: [-0.5, 0, -1]
    },
    {
        shape3d: &#39;box&#39;,
        s3: [0.3, 0.3, 0.3],
        color: &#39;red&#39;
    }
]);</code></pre>

<p>组合数组元素对象的<code>shape3d</code>属性值，依然可为数组类型，以实现无限递归的组合层次嵌套，以上代码定义的<code>G</code>模型呈现效果如下图：</p>

<p><img src=""></p>

<div id="ref_binding"></div>

<h2>数据绑定</h2>

<p>详见<a href="../../core/databinding/ht-databinding-guide.html#ref_shape3dmodel">数据绑定手册</a></p>

<div id="ref_ext"></div>

<h2>扩展类型</h2>

<p><code>HT</code>提供了众多基础图元类型，但为快速构建房间楼宇即各种场景装饰物，在建模扩展包种增加了更多的图元类型，方便用户用API或可视化编辑工具快速搭建项目场景。</p>

<div id="ref_symbol"></div>

<h3>Symbol</h3>

<p><code>ht.Symbol</code>继承于<code>ht.Node</code>，常用于展示花盆、公告牌等装饰物的平面图片，其默认设置了<code>all.visible</code>为<code>false</code>，重载了<code>setIcon</code>函数，
在设置<code>icon</code>的同时通过<code>addStyleIcon</code>将图片也用于显示在<code>Graph3dView</code>上。使用<code>Symbol</code>一般只需要再构造函数或通过<code>setIcon</code>传入参数，
然后设置<code>p3</code>位置即可。</p>

<ul><li><code>ht.Symbol(icon, autorotate, transaprent)</code></li><li><code>setIcon(icon, autorotate, transaprent)</code><ul><li><code>icon</code> 指定显示的图片</li><li><code>autorotate</code> 默认值为<code>false</code>，控制是否自动朝向眼睛的方向，可设为<code>true</code>或<code>x</code>、<code>y</code>、<code>z</code>，其中<code>y</code>代表限定沿着<code>y</code>轴转动</li><li><code>transaprent</code> 代表是否要显示为透明，默认为<code>false</code></li></ul></li></ul>

<p><code>setIcon</code>函数会返回注册的<code>json</code>对象，可用于再设置额外的参数，可参见<a href="../../core/3d/ht-3d-guide.html#ref_icons">3D手册图标章节</a></p>

<div id="ref_csgnode"></div>

<h3>CSGNode</h3>

<p><code>CSG</code>是 <a href="http://en.wikipedia.org/wiki/Constructive_solid_geometry">Constructive Solid Geometry</a> 建模技术的简称，
通过裁剪<code>subtract</code>、融合<code>union</code>和相交<code>intersect</code>的运算，组合出复杂模型效果，<code>HT</code>封装了<code>ht.CSGNode</code>和<code>ht.CSGShape</code>等
图元类型来支持<code>CSG</code>的组合功能，常用于墙面的门窗挖空凿洞的应用场景。</p>

<p><code>ht.CSGNode</code>继承于<code>ht.Node</code>，当<code>style</code>的<code>shape3d</code>属性为空时显示为六面体效果，<code>CSGNode</code>如果通过<code>setHost</code>吸附到
宿主<code>CSGNode</code>或<code>CSGShape</code>后，宿主<code>CSGNode</code>或<code>CSGShape</code>可与吸附的<code>CSGNode</code>图元进行<code>CSG</code>的组合建模。</p>

<ul><li><code>attach.cull</code>：默认值为<code>false</code>，该值决定是否对相交的部分进行剔除</li><li><code>attach.operation</code>：默认值为<code>subtract</code>，可取以下值：<ul><li><code>subtract</code>：代表对<code>host</code>的<code>CSGNode</code>或<code>CSGShape</code>图元进行挖空裁剪</li><li><code>union</code>：代表对<code>host</code>的<code>CSGNode</code>或<code>CSGShape</code>图元进行融合</li><li><code>intersect</code>：代表对<code>host</code>的<code>CSGNode</code>或<code>CSGShape</code>图元取相交部分</li><li>设置为其他值代表对<code>host</code>图元不进行任何操作</li></ul></li></ul>

<p>当宿主<code>CSGNode</code>或<code>CSGShape</code>进行组合生成新的模型部分的渲染由<code>csg.*</code>的参数来控制，与<code>all.*</code>等六面体的其他面的控制方式一致，
参见<a href="../../core/3d/ht-3d-guide.html#ref_cube">3D手册的六面体章节</a>。</p>

<ul><li><code>csg.light</code>：是否受光线影响，受光线影响时正面看时最亮，侧面看时变暗</li><li><code>csg.visible</code>：是否可见，</li><li><code>csg.color</code>：颜色</li><li><code>csg.image</code>：贴图，优先级高于<code>csg.color</code></li><li><code>csg.blend</code>：染色颜色，优先级高于<code>csg.color</code>，如果有贴图时，则对贴图染色</li><li><code>csg.opacity</code>：透明度，值范围<code>0~1</code></li><li><code>csg.reverse.flip</code>：反面是否显示正面的内容</li><li><code>csg.reverse.color</code>：反面颜色，即立方体内部面颜色</li><li><code>csg.reverse.cull</code>：反面是否可见，即立方体内部面是否显示，一般六面闭合立方体，可不显示以提高性能</li><li><code>csg.transparent</code>：是否透明，若<code>color|image|opacity</code>属性出现透明区域情况下，一般需设置为<code>true</code></li><li><code>csg.discard.selectable</code>: 代表贴图透明度低到被剔除的部分也能点击选中，可设置为<code>false</code>则被剔除部分不可选中</li><li><code>csg.cull.color</code>: 设置被裁切位置显示的颜色值</li><li><code>csg.cull.box</code>: 设置是否用模型的包围盒进行裁切，默认为<code>true</code>，表示采用<code>Node</code>包围盒裁切，可设置为<code>false</code>，表示采用<code>Node</code>设置的<code>Shape3dModel</code>进行裁切。注意，如果<code>Shape3dModel</code>存在凹陷的面，不建议将该属性设置为<code>false</code></li></ul>

<p>需要注意的是并没有<code>csg.uv</code>，<code>csg.uv.scale</code>和<code>csg.uv.offset</code>等贴图相关参数，<code>csg</code>相关表面的<code>uv</code>值由吸附者的六面贴图相关参数决定，
只有贴图图片参数由<code>host</code>的<code>csg.image</code>参数决定。</p>

<blockquote><p>可以把<code>CSG.*</code>理解为除<code>left/rigth/top/bottom/front/back</code>外的第七个面</p></blockquote>

<div id="ref_csgbox"></div>

<h3>CSGBox</h3>

<p><code>ht.CSGBox</code>继承于<code>ht.CSGNode</code>，其除具备父类<code>CSGNode</code>的挖空等功能外，还可对六个面进行旋转展开关闭的操作，
因此增加了以下面相关<code>style</code>属性，由于六个面的参数一致，以下仅以<code>front</code>进行说明：</p>

<ul><li><code>front.toggleable</code>：是否允许双击面进行展开和关闭的操作，默认为<code>false</code></li><li><code>front.expanded</code>：当前是否处于展开状态，默认为<code>false</code></li><li><code>front.angle</code>：当前状态旋转角度，默认为<code>0</code></li><li><code>front.start</code>：关闭状态的起始旋转弧度，默认为<code>0</code></li><li><code>front.end</code>：展开状态的结束旋转弧度，默认为<code>Math.PI/2</code></li><li><code>front.axis</code>：展开和关闭操作的旋转轴，可取以下值，默认为<code>left</code><ul><li><code>left</code>：以左边为轴进行旋转</li><li><code>right</code>：以右边为轴进行旋转</li><li><code>top</code>：以顶边为轴进行旋转</li><li><code>bottom</code>：以底边为轴进行旋转</li><li><code>v</code>：以中间垂直线为轴进行旋转</li><li><code>h</code>：以中间水平线为轴进行旋转</li></ul></li></ul>

<p>以上的<code>front.expanded</code>和<code>front.angle</code>这两个参数一般无需用户直接操作，<code>ht.CSGBox</code>提供了以下函数封装，
参见<a href="../../plugin/form/examples/example_unboxing.html">表单手册 Unboxing 例子</a></p>

<ul><li><code>toggleFace(face, anim)</code>：切换面当前展开或关闭状态，<code>face</code>可取值<code>left|right|top|bottom|front|back</code>，<code>anim</code>代表是否动画</li><li><code>isFaceExpanded(face)</code>：判断面当前是否处于展开状态，<code>face</code>可取值<code>left|right|top|bottom|front|back</code></li><li><code>setFaceExpanded(face, expanded, anim)</code>：设置面展开或合并状态，<code>expanded</code>可取值<code>true|false</code>，<code>anim</code>代表是否动画</li></ul>

<blockquote><p>注意以上面相关参数并无<code>all.*</code>的对应六面统一参数，<code>CSGBox</code>的相关面参数只能每个面独立设置</p></blockquote>

<div id="ref_doorwindow"></div>

<h3>DoorWindow</h3>

<p><code>ht.DoorWindow</code>继承于<code>ht.CSGNode</code>，其除具备父类<code>CSGNode</code>的挖空等功能外，还可进行整体的旋转展开关闭的操作，
常用于作为门或窗的业务对象，吸附于<code>CSGNode</code>或<code>CSGShape</code>的<code>host</code>作为墙面的图元，
<code>DoorWindow</code>增加了以下<code>style</code>参数进行控制，其中<code>dw</code>为<code>DoorWindow</code>的简称：</p>

<ul><li><code>dw.flip</code>：对图元显示进行翻转，相当于沿<code>z</code>轴旋转<code>180</code>度</li><li><code>dw.s3</code>：对图元显示尺寸在原有基础上再进行缩放，默认值<code>[0.999, 0.999, 0.5]</code>代表<code>x</code>和<code>y</code>收缩了<code>0.001</code>，<code>z</code>收缩了<code>0.5</code></li><li><code>dw.t3</code>：对图元显示位置在原有基础上再进行绝对位置偏移，默认值为空代表不偏移</li><li><code>dw.toggleable</code>：是否允许双击进行展开和关闭的操作，默认为<code>true</code></li><li><code>dw.expanded</code>：当前图元是否处于展开状态，默认为<code>false</code></li><li><code>dw.angle</code>：当前状态旋转角度，默认为<code>0</code></li><li><code>dw.start</code>：关闭状态的起始旋转弧度，默认为<code>0</code></li><li><code>dw.end</code>：展开状态的结束旋转弧度，默认为<code>Math.PI/2</code></li><li><code>dw.axis</code>：展开和关闭操作的旋转轴，可取以下值，默认为<code>left</code><ul><li><code>left</code>：以左边为轴进行旋转</li><li><code>right</code>：以右边为轴进行旋转</li><li><code>top</code>：以顶边为轴进行旋转</li><li><code>bottom</code>：以底边为轴进行旋转</li><li><code>v</code>：以中间垂直线为轴进行旋转</li><li><code>h</code>：以中间水平线为轴进行旋转</li></ul></li></ul>

<p><iframe src="examples/example_bookshelf.html" style="height:500px"></iframe></p>

<blockquote><p><code>DoorWindow</code>类型还可以与<code>OBJ</code>格式的<code>3D</code>模型结合，显示更为逼真的门窗效果，参见<a href="../../plugin/obj/ht-obj-guide.html">OBJ手册</a>的
<a href="../../plugin/obj/ht-obj-guide.html#ref_doorwindow">门窗应用例子</a></p></blockquote>

<div id="ref_csgshape"></div>

<h3>CSGShape</h3>

<p><code>ht.CSGShape</code>继承于<code>ht.Shape</code>，目前仅支持忽略<code>segments</code>参数的折线墙面效果，<code>CSGNode</code>如果通过<code>setHost</code>吸附到宿主<code>CSGShape</code>后，
<code>CSGShape</code>可与吸附的<code>CSGNode</code>图元进行<code>CSG</code>的组合建模。</p>

<ul><li><code>attach.index</code>：默认值为<code>-1</code>，用于<code>CSGNode</code>吸附到<code>Shape</code>图元时使用，代表所在<code>Shape</code>的线段索引</li><li><code>attach.offset</code>：默认值为<code>0</code>，与<code>attach.index</code>参数结合使用，代表吸附在<code>CSGShape</code>图元所在线段的偏移位置</li><li><code>attach.offset.relative</code>：默认值为<code>false</code>，如果为<code>true</code>则偏移量代表所在线段长度乘以<code>attach.offset</code>值</li><li><code>attach.offset.opposite</code>：默认值为<code>false</code>，与<code>attach.offset</code>参数结合使用，代表所在线段的正方向还是反方向偏移</li><li><code>attach.thickness</code>：<code>Node</code>默认值为空，<code>CSGNode</code>默认值为<code>1.001</code>，<code>CSGNode</code>的<code>height</code>属性值由<code>Shape</code>的<code>thickness</code>乘以该值决定</li><li><code>attach.gap</code>：默认值为<code>0</code>，代表与线段垂直方向的偏移</li><li><code>attach.gap.relative</code>：默认值为<code>false</code>，如果为<code>true</code>则与线段垂直方向的偏移为所<code>Shape</code>的<code>thickness</code>值乘以<code>attach.gap</code></li></ul>

<p>当吸附者<code>CSGNode</code>设置了以上<code>style</code>参数后，则其会自动调节自身大小、位置和旋转角度，使其保持定位在<code>Shape</code>对应的线段上，
该功能不仅适用于<code>ht.CSGShape</code>，也适用于<code>ht.Shape</code>的父类图元。</p>

<p><code>CSGShape</code>类型对<code>ht.Shape</code>进行了简化，除不支持<code>segments</code>参数外，还无效了<code>setRotation</code>、<code>setRotationX</code>和<code>setRotationZ</code>旋转功能。</p>

<p><iframe src="examples/example_csgshape.html" style="height:520px"></iframe></p>    <hr id="contact" style="margin: 20px 0 1px 0">
    <a href="http://www.hightopo.com"><img class="logo"></a>欢迎交流 <a href="mailto:service@hightopo.com">service@hightopo.com</a>
</body>
</html>
